<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" class="wd">
    <button>百度一下</button>

    <ul>
        <!-- <li>
            <a href=""></a>
        </li> -->
    </ul>

    <script>

        // var let const 
        // 只有var声明的全局变量会挂在window对象上  

       
        // 只要用了window去访问  就只能使用var声明
        var baidu = {
            sug : function(data) {
                console.log(data);
                const {q,s} = data ;
                
                let html = '' ;
                console.log(s);
                s.forEach(item => {
                    html += ` <li>
                                <a href="https://www.baidu.com/s?wd=${item}">${item}</a>
                            </li>`
                })

                oUl.innerHTML = html ;
            }
        }

    


        const oInp = document.querySelector('input') ;
        const oBtn = document.querySelector('button') ;

        const oUl = document.querySelector('ul') ;


        oBtn.onclick = function() {
            const wd = oInp.value ;
            const oS = document.querySelector('#s') ;
            if(oS) {
                oS.remove()
            }

            // 利用script标签请求数据
            const oScript = document.createElement('script') ;
            oScript.id = 's' ;
            oScript.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${wd}` ;
            document.body.appendChild(oScript);
        }




    </script>
    
</body>
</html>